<!DOCTYPE html>


<html>
    <head>
        <title>Locationtracker solely in web browser</title>
        <!-- Yes we like unicode!
             Not any kind of wired west european encoding that isn't even capable
             of managing a book list.
        -->
        <meta charset="UTF-8">

        <!-- Responsivness
             http://www.lingulo.com/de/tutorials/css/how-to-build-a-html5-website-from-scratch
        -->


        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>       
        <!-- Regarding to
             http://www.selfhtml5.org/2010-apps-programmieren/web-app-mit-html5-programmieren-das-css-stylesheet/        
        <meta name="viewport" content="user-scalable-no, width=device-width">
        -->

        <!-- Yes jQuery here we go.
        -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.css" />
        <link rel="stylesheet" href="css/themes/myTheme.css" />

        <!-- We have to load the Google Javascript files first.
             See http://stackoverflow.com/questions/12500654/uncaught-referenceerror-google-is-not-defined
        -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

        <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
        <!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> -->
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>        

        <!-- Needed to get the Google map stuff functional.
        -->
        <script src="js/libs/jquery-ui-map/ui/jquery.ui.map.js" ></script>


        <script src="js/libs/jqueryui/jquery-ui.js" ></script>
        <!-- And our own Javasript file. -->
        <script type="text/javascript" src="js/custom_developed_javascript.js" ></script>
        <script type="text/javascript" src="js/custom_developed_javascript_localStorage.js" ></script>



        <!-- <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script> -->


        <!-- Here we go with Javascript, jQuery and with our logic 
        -->
        <script type="text/javascript">
            // Do what I want after finishing loading the page 
            $(document).ready(function() {

                doBuildPreviousLocationsItemInitially();

                //It is important to initialize the div that is supposed
                //to hold the Google map immediately after the page was
                //loaded completely as a Google map variable/thing/object
                //Javascript whatever structure.
                //Otherwise we would get errors in subsequent Javascript 
                //routines.
                //$("#mapId").gmap();
                //But we do this here.
                doShowCurrentGeoPosition();

                //alert(11);


            });

            /**
             $(document).on('pageshow', '#pageId', function() {
             alert('pageshow');
             });
             **/


            //Necessary to tell the Google map about its height after
            //load up of the page.
            //Unfortunatelly this is NOT working with the Google Chrome Browser 
            //in conjunction with the Netbeans Google Chrome extension.
            //Google Chrome is always responding that the screen height is 900.
            //But it is ought to work on real mobile browsers.
            $(document).bind("pageshow", function(event, data) {
                //google.maps.event.trigger($('#mapId'), 'resize');
                //alert(2234);
                reHeightGooglemap();

            });


            // Listen for resize changes
            window.addEventListener("resize", function() {
            //Necessary to tell the Google map about its height after
            //orientation change.
                reHeightGooglemap();
            }, false);


            //Click listener for showing location button.
            $(function() {
                $("#showLocationButtonId").click(function() {
                    doShowCurrentGeoPosition();
                    //alert('clicked!');
                });
            });






        </script>
    </head>
    <body>


        <!-- Haui todo
        
        Noch die Map auf Autoheight setzen.
        Am besten mit jQuery document ready Methode.
        
        
        
        -->


        <div data-role="page" id="pageId">
            <div data-theme="a" data-role="header">
                <h3>
                    Location Tracker
                </h3>
            </div>
            <div data-role="content">

                <!--
                <img id="mapId1" src="https://maps.googleapis.com/maps/api/staticmap?center=&amp;zoom=14&amp;size=288x220&amp;markers=&amp;sensor=false"
                     height="220" width="288" alt="Interactive map that displays the location.">
                -->

                <!-- width wird weggelassen da der Browser das Element immer in 100 prozentiger Breite darstellt -->
                <div id="mapId" style="height:220px"></div>

                <div id="PreviousLocationsHeaderId" >
                    <div id="PreviousLocationsContentId" data-role="collapsible" data-theme="c" data-content-theme="b">
                        <h3>
                            Previous locations
                        </h3>
                        <ul id="PreviousLocationsContentListId" data-role="listview" data-divider-theme="c">
                            <!--
                            <li>Test 1</li>
                            <li>Test 2</li>
                            -->
                        </ul>

                    </div>

                </div>


                <a id="showLocationButtonId" data-role="button" href="#page1">
                    Show current location
                </a>
            </div>
        </div>



    </body>        
</html>
